<template>
   <div>
    <div v-if="mode === 'DESIGN'">
      <el-button disabled :icon="User" type="primary" size="default" round>选择人员</el-button>
      <span class="placeholder"> {{ placeholder }}</span>
    </div>
    <div v-else-if="mode === 'PC' && !readonly" style="max-width: 350px">
      <el-button :icon="User" type="primary" size="default" round @click="show">选择人员</el-button>
      <org-picker type="user" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected"/>
      <span class="placeholder"> {{ placeholder }}</span>
      <div style="margin-top: 5px">
        <el-tag size="small" style="margin: 5px" closable v-for="(dept, i) in _value" :key="dept.id" @close="delDept(i)">{{ dept.name }}</el-tag>
      </div>
    </div>
    <div v-else-if="mode === 'MOBILE' && !readonly">
      <field readonly clearable @clear="_value = []" right-icon="arrow" clickable
        v-model="deptDesc" :placeholder="placeholder" @click="show"></field>
      <org-picker :pc-mode="false" type="user" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected"/>
    </div>
    <div v-else class="preview">
      <avatar :size="35" :name="user.name" showY :src="user.avatar" v-for="user in _value" :key="user.id" />
    </div>
  </div>
</template>

<script>
import { Field } from 'vant'
import componentMinxins from '/@/views/setting/workflow/components/ComponentMinxins'
import OrgPicker from '/@/views/setting/workflow/process/OrgPicker.vue'
import { computed, reactive, ref, toRefs } from 'vue'
import { User } from '@element-plus/icons-vue'

export default {
    name: 'UserPicker',
    mixins: [componentMinxins],
    components: { Field, OrgPicker },
    props: {
        modelValue: {
            type: Array,
            default: () => {
                return []
            },
        },
        placeholder: {
            type: String,
            default: '请选择人员',
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        expansion: {
            type: Boolean,
            default: false,
        },
        options: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    emits: ['update:modelValue'],
    setup(props, context) {
        const orgPicker = ref()
        const state = reactive({
            showOrgSelect: false,
        })
        const deptDesc = computed({
            get: () => {
                if (_value.value && _value.value.length > 1) {
                    return `${_value.value[0].name}${_value.value[1].name}..等${_value.value.length}人`
                } else if (_value.value && _value.value.length > 0) {
                    return _value.value[0].name
                } else {
                    return null
                }
            },
            set: val => {}
        })
        const selected = (values) => {
            state.showOrgSelect = false
            _value.value = values
        }
        const delDept = (i) => {
            _value.value.splice(i, 1)
        }
        const show = () => {
            orgPicker.value.show()
        }
        return {
            ...toRefs(state),
            deptDesc,
            selected,
            delDept,
            orgPicker,
            show,
            User
        }
    }
}
</script>

<style lang="scss" scoped>
.placeholder {
  margin-left: 10px;
  color: #adabab;
  font-size: smaller;
}
.preview {
  display: flex;
  justify-content: left;
  :deep(.avatar) {
    margin: 0 5px;
  }
}
</style>